<template>
    <div class="container">
        <div class="substance">
            <div class="substance-while">2022-06-24</div>
            <div class="substance-message">
                <div class="service-stage">
                    <div class="service-caption">服务阶段设置通知</div>
                    <image
                        class="service-image"
                        src="../../../static/information-notify/more.png"
                    />
                </div>
                <div class="respective-row">
                    设置<text class="respective-text">肖恩</text>的<text
                        class="respective-text"
                        >1</text
                    >个签单阶段为<text class="respective-text">已交付</text>
                </div>
                <div class="nomenclature flex.align">
                    <div class="nomenclature-grey">签单产品：</div>
                    子弹发薪
                </div>
                <div class="nomenclature flex.align">
                    <div class="nomenclature-grey">所属企业：</div>
                    子弹发薪
                </div>
                <div class="nomenclature flex.align">
                    <div class="nomenclature-grey">更换人：</div>
                    子弹发薪
                </div>
                <div class="nomenclature flex.align">
                    <div class="nomenclature-grey">更换时间：</div>
                    子弹发薪
                </div>
            </div>
        </div>
        <div class="substance">
            <div class="substance-while">2022-06-24</div>
            <div class="substance-message">
                <div class="service-stage">
                    <div class="service-caption">服务阶段设置通知</div>
                    <image
                        class="service-image"
                        src="../../../static/information-notify/more.png"
                    />
                </div>
                <div class="respective-row">
                    设置<text class="respective-text">肖恩</text>的<text
                        class="respective-text"
                        >1</text
                    >个签单阶段为<text class="respective-text">已交付</text>
                </div>
                <div class="nomenclature flex.align">
                    <div class="nomenclature-grey">签单产品：</div>
                    子弹发薪
                </div>
                <div class="nomenclature flex.align">
                    <div class="nomenclature-grey">所属企业：</div>
                    子弹发薪
                </div>
                <div class="nomenclature flex.align">
                    <div class="nomenclature-grey">更换人：</div>
                    子弹发薪
                </div>
                <div class="nomenclature flex.align">
                    <div class="nomenclature-grey">更换时间：</div>
                    子弹发薪
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    background: #fafafc;
    width: 100%;
    height: 100%;
}
.substance-while {
    max-width: 200rpx;
    padding: 6rpx 30rpx;
    box-sizing: border-box;
    background: $black;
    border-radius: 24rpx;
    opacity: 0.2;
    color: white;
    font-size: $font-base;
    text-align: center;
    margin: 0 auto;
}
.substance-message {
    width: 690rpx;
    border-radius: 16rpx;
    background: #ffffff;
    margin: 24rpx auto 108rpx auto;
    @include padding(30rpx 30rpx 14rpx 30rpx);
    .service-stage {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .service-caption {
            color: $black;
            font-size: $font-large;
            font-weight: 600;
        }
        .service-image {
            width: 36rpx;
            height: 36rpx;
        }
    }
    .respective-row {
        @include padding(24rpx 0 30rpx 0);
        font-size: $font-normal;
        .respective-text {
            color: $blue;
            padding: 0 8rpx;
        }
    }
    .nomenclature {
        display: flex;
        align-items: center;
        font-size: $font-normal;
        padding-bottom: 16rpx;
        .nomenclature-grey {
            width: 138rpx;
            font-weight: 400;
            color: $grey;
        }
    }
}
</style>
